import React, {useState} from "react";
import {Link, Route, Routes, Navigate, useRoutes,useNavigate} from "react-router-dom";
import './index.css'
import FaceSearch from "../Face-Search";
import InfoManager from "../Info-Manager";

const NavHome: React.FC = () => {
    const routes = useRoutes([
            {
                element:<FaceSearch/>,
                path:'/face-search'
            },{
                element:<InfoManager/>,
                path:'/info-manager'
            },
        ]
    )
    const navigate = useNavigate();
    // navigate('/home',{
    //     replace:false,
    //     state:{
    //         name:123
    //     }
    // })
    // navigate(1)
    // navigate(-1)

    return <div className="nav-home">
        <div className="nav-side">
            <Link className='nav-li' to="/face-search">FaceSearch</Link>
            <Link className='nav-li' to="/info-manager">NavSearch</Link>
        </div>
        <div className="nav-content">
            <Routes>
                <Route element={<FaceSearch/>} path="/face-search"/>
                <Route element={<InfoManager/>} path="/info-manager"/>
                <Route element={<Navigate  to={"/info-manager"}/>} path="/"/>
            </Routes>
            {/*<Routes>*/}
            {/*    {routes}*/}
            {/*</Routes>*/}

        </div>
    </div>
}

export default NavHome;
